<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查找</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.4/lib/index.css">

    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <link rel="stylesheet" href="/css/global.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.4/lib/vant.min.js"></script>
    <!--    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
    <script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
</head>
<body>
<div class="bg"></div>
<div id="app">
    <van-row>
        <van-col span="24">
            <van-nav-bar
                    title="查找"
                    left-text="返回"
                    left-arrow
                    right-text="编辑"
                    @click-left="onClickLeft"
                    @click-right="showDeleteButton"
            />


        </van-col>
        <van-col span="24">
            <div class="d-flex">
                <div class="w-100">
                    <van-search v-model="input" placeholder="请输入搜索关键词" @search="onSearch"/>
                </div>
                <div class="flex-grow-shrink mr-4">
                    <van-dropdown-menu>
                        <van-dropdown-item v-model="selectedvalue" :options="status"/>
                    </van-dropdown-menu>
                </div>
            </div>
        </van-col>
        <van-col span="24">
            <div class="box m-4 pl-3 pr-3 pb-3">
                <ul class="breakfast-list">
                    <!--                    <li v-for="(AModelAndUnits,index) in modelAndUnits ">-->
                    <!--                        <div class="flex-grow-shrink">-->
                    <!--                            <van-image-->
                    <!--                                    width="80px"-->
                    <!--                                    height="80px"-->
                    <!--                                    fit="cover"-->
                    <!--                                    src="https://img.yzcdn.cn/vant/cat.jpeg"-->
                    <!--                            />-->
                    <!--                        </div>-->
                    <!--                        <div class="w-100 pl-3 pr-3">-->
                    <!--                            <p class="size3 bold" style="display：inline-block;" v-model="">鸡蛋</p>-->
                    <!--                            <p class="size3 bold" style="display：inline-block;"> 1</p>-->
                    <!--                            <p class="size3 bold" style="display：inline-block;"> 个</p>-->
                    <!--                            <p class="size1 color-lesser mt-2">5千卡</p>-->
                    <!--                        </div>-->
                    <!--                        <van-button class="flex-grow-shrink" plain type="primary" @click="showPopup">选择</van-button>-->
                    <!--                    </li>-->
                    <li v-for="(AModelAndUnits,index) in modelAndUnits ">
                        <div class="flex-grow-shrink">
                            <!--                            <van-image-->
                            <!--                                    width="80px"-->
                            <!--                                    height="80px"-->
                            <!--                                    fit="cover"-->
                            <!--                                    src="require('../image/userImgfcbdbde6-230b-469d-bf3c-6fe03eb81b1d.jpg')"-->
                            <!--                                    error-icon="https://img.yzcdn.cn/vant/cat.jpeg"-->

                            <!--                            ></van-image>-->
                            <img :src="AModelAndUnits.imgurl" width="80px" height="80px"/>
                        </div>
                        <div class="w-100 pl-3 pr-3">
                            <p class="size3 bold" style="display：inline-block;">{{AModelAndUnits.name}}</p>
                            <span class="size3 bold" style="display：inline-block;">每</span>
                            <span class="size3 bold"
                                  style="display：inline-block;">{{AModelAndUnits.list[0].unitName}}</span>
                            <span class="size3 bold" style="display：inline-block;">消耗</span>
                            <p class="size1 color-lesser mt-2">{{AModelAndUnits.list[0].unitConsumeCalories}}千卡</p>
                        </div>
                        <van-button class="flex-grow-shrink" plain type="primary" @click="showPopup(index)">选择
                        </van-button>
                        <van-icon name="../image/delete.png" size="40" @click="deleteFood(index)"
                                  v-show="deletebuttonshow"></van-icon>
                    </li>
                    <li>
                        <!--                        <div class="flex-grow-shrink">-->
                        <!--                            <van-image-->
                        <!--                                    width="80px"-->
                        <!--                                    height="80px"-->
                        <!--                                    fit="cover"-->
                        <!--                                    src="https://img.yzcdn.cn/vant/cat.jpeg"-->
                        <!--                            />-->
                        <!--                        </div>-->
                        <!--                        <div class="w-100 pl-3 pr-3">-->
                        <!--                            <p class="size3 bold">鸡蛋1个</p>-->
                        <!--                            <p class="size1 color-lesser mt-2">5千卡</p>-->
                        <!--                        </div>-->
                        <!--                        <van-button class="flex-grow-shrink" plain type="primary">选择</van-button>-->
                        <!--                    </li>-->

                </ul>
            </div>
        </van-col>
    </van-row>
    <van-row>
        <van-col span="24">
            <div style="height: 80px;"></div>
            <div class="fixed-bottom p-2 bg-white d-flex" style="box-sizing: border-box">
                <div class="w-100 pr-2">
                    <van-button square color="linear-gradient(to right, #ffa64b, #f65649)" block
                                @click="addCustomizeFood">添加自定义饮食
                    </van-button>
                </div>
                <div class="w-100 pl-2">
                    <van-button square color="linear-gradient(to right, #4bb0ff, #6149f6)" block>添加自定义套餐</van-button>
                </div>
            </div>
        </van-col>
    </van-row>
    <van-row>
        <van-col span="24">
            <van-popup
                    v-model="show"
                    closeable
                    position="bottom"
                    :style="{ height: '60%' }"
            >
                <ul class="breakfast-list" style="margin: 50px 20px 20px 20px">
                    <!--                    <li>-->
                    <!--                        <div class="flex-grow-shrink">-->
                    <!--                            <van-image-->
                    <!--                                    width="80px"-->
                    <!--                                    height="80px"-->
                    <!--                                    fit="cover"-->
                    <!--                                    src="https://img.yzcdn.cn/vant/cat.jpeg"-->
                    <!--                            />-->
                    <!--                        </div>-->
                    <!--                        <div class="w-100 pl-3 pr-3" style="overflow: hidden">-->
                    <!--                            <p class="size3 bold">鸡蛋1个<small class="color-ash">(23千卡/个)</small></p>-->
                    <!--                            <p class="size1 mt-2 text-ellipsis">Pellentesque quam est, auctor</p>-->
                    <!--                            <p class="size1 mt-2 d-flex align-items-center">-->
                    <!--                                <van-icon name="star-o"></van-icon>-->
                    <!--                                <span class="ml-2">收藏</span>-->
                    <!--                            </p>-->
                    <!--                        </div>-->
                    <!--                        <div class="flex-grow-shrink size1 color-ash">-->
                    <!--                            <span class="mr-2">查看实物详情</span><van-icon name="arrow"></van-icon>-->
                    <!--                        </div>-->
                    <!--                    </li>-->
                    <li>
                        <div class="flex-grow-shrink">
                            <!--                            <van-image v-model="pimage"-->
                            <!--                                    width="80px"-->
                            <!--                                    height="80px"-->
                            <!--                                    fit="cover"-->
                            <!--                                    src="https://img.yzcdn.cn/vant/cat.jpeg"></van-image>-->
                            <img :src="pimage" width="80px" height="80px"/>
                        </div>
                        <div class="w-100 pl-3 pr-3" style="overflow: hidden">
                            <p class="size3 bold" v-model="popname">{{popname}}
                                <small class="color-ash">(<span>{{spancosume}}</span>千卡/<span v-model="">{{spanunitname}}</span>)
                                </small>
                            </p>
                            <p class="size1 mt-2 text-ellipsis">{{popdescription}}</p>
                            <p class="size1 mt-2 d-flex align-items-center">
                                <van-icon color="#ff7b34" name="star"></van-icon>
                                <span class="ml-2" v-if="isCollect">已收藏</span>
                                <span class="ml-2" v-else="isCollect">收藏</span>
                            </p>
                            <div class="d-flex align-items-center mt-3">

                                <!--                                <select class="p-1" v-model="selectedFoodValue" :options="eatType.value">-->

                                <!--                            </select>-->


                            </div>
                            <van-dropdown-menu>
                                <van-dropdown-item v-model="selectedUnit" :options="popunitdata"></van-dropdown-item>
                                <van-dropdown-item v-model="selectedFoodValue" :options="eatType"></van-dropdown-item>
                            </van-dropdown-menu>
                            <van-dropdown-menu>
                                <van-cell-group>
                                    <span>数量</span>
                                    <van-field v-model="quanlity" placeholder="请输入数字"/>
                            </van-dropdown-menu>

                            </van-cell-group>
                            <van-button @click="eatFood" style="margin: 8px 0;border-radius: 4px" size="small" square
                                        color="linear-gradient(to right, #4bb0ff, #6149f6)" block>吃掉
                            </van-button>
                        </div>
                        <div class="flex-grow-shrink size1 color-ash">
                            <span class="mr-2" @click="toTakealookoffood()">查看实物详情</span>
                            <van-icon name="arrow"></van-icon>
                        </div>
                    </li>
                    <!--                    <li>-->
                    <!--                        <div class="flex-grow-shrink">-->
                    <!--                            <van-image-->
                    <!--                                    width="80px"-->
                    <!--                                    height="80px"-->
                    <!--                                    fit="cover"-->
                    <!--                                    src="https://img.yzcdn.cn/vant/cat.jpeg"-->
                    <!--                            ></van-image>-->
                    <!--                        </div>-->
                    <!--                        <div class="w-100 pl-3 pr-3" style="overflow: hidden">-->
                    <!--                            <p class="size3 bold" >{{modelAndUnits[index]}}</p>-->
                    <!--                            <div class="d-flex align-items-center mt-3">-->
                    <!--                                <select class="p-1">-->
                    <!--                                    <option>数量：1</option>-->
                    <!--                                    <option>数量：2</option>-->
                    <!--                                    <option>数量：3</option>-->
                    <!--                                </select>-->
                    <!--                                <select class="p-1 ml-2">-->
                    <!--                                    <option>条目一</option>-->
                    <!--                                    <option>条目二</option>-->
                    <!--                                    <option>条目三</option>-->
                    <!--                                </select>-->
                    <!--                            </div>-->
                    <!--                        </div>-->
                    <!--                        <div class="w-100 pl-3 pr-3" style="overflow: hidden">-->
                    <!--                            <p class="size3 bold">鸡蛋1个</p>-->
                    <!--                            <div class="d-flex align-items-center mt-3">-->
                    <!--                                <select class="p-1">-->
                    <!--                                    <option>数量：1</option>-->
                    <!--                                    <option>数量：2</option>-->
                    <!--                                    <option>数量：3</option>-->
                    <!--                                </select>-->
                    <!--                                <select class="p-1 ml-2">-->
                    <!--                                    <option>条目一</option>-->
                    <!--                                    <option>条目二</option>-->
                    <!--                                    <option>条目三</option>-->
                    <!--                                </select>-->
                    <!--                            </div>-->
                    <!--                        </div>-->
                    <div class="flex-grow-shrink size1 color-ash">
                        <van-icon name="arrow"></van-icon>
                    </div>
                    </li>
                </ul>
                <!--                <div class="m-5">-->
                <!--                    <van-image-->
                <!--                            width="100%"-->
                <!--                            fit="cover"-->
                <!--                            src="https://img.yzcdn.cn/vant/cat.jpeg"-->
                <!--                    ></van-image>-->
                <!--                </div>-->
            </van-popup>
        </van-col>
    </van-row>
</div>
</body>
<script>
    Vue.use(VueRouter);
    const router = new VueRouter({});
    //push
    const VueRouterPush = VueRouter.prototype.push;
    VueRouter.prototype.push = function push(to) {
        return VueRouterPush.call(this, to).catch(err = > err
    )
    };

    //replace
    const VueRouterReplace = VueRouter.prototype.replace;
    VueRouter.prototype.replace = function replace(to) {
        return VueRouterReplace.call(this, to).catch(err = > err
    )
    };

    var vm = new Vue({
        router,
        el: '#app',
        data() {
            return {
                spanunitname: '',
                spancosume: '',
                quanlity: 1,
                pimage: '',
                modelid: '',
                popname: '',
                isCollect: true,
                eatType: [
                    {text: '早餐', value: 1},
                    {text: '午餐', value: 2},
                    {text: '晚餐', value: 3},
                    {text: '加餐', value: 4}
                ],
                eatImg: '',
                selectedFoodValue: '',
                selectedUnit: '',
                popdescription: '',
                popunitdata: [],
                tempvalue: '暂时的数据',
                input: '',
                selectedvalue: 0,
                value1: 0,
                status: [
                    {text: '默认的食物', value: 0},
                    {text: '未上传的自定义食物', value: 1},
                    {text: '已上传的自定义食物', value: 2},
                    {text: '默认套餐', value: 3},
                    {text: '未上传自定义的套餐', value: 4},
                    {text: '已上传的自定义套餐', value: 5}
                ],
                deletebuttonshow: false,
                show: false,
                checked: true,
                digit: '',
                modelAndUnits: [
                    {
                        modelId: '',
                        satus: '',
                        name: '',
                        fmCategory: '',
                        imgurl: '',
                        description: '',
                        userId: '',
                        list: [
                            {
                                fUnitId: '',
                                unitName: '',
                                unitConsumeCalories: ''
                            },
                        ],
                    }
                ]
            }
        },
        beforeMount: function () {
            console.log("生命函数在这里" + this.input + this.selectedvalue);
            // console.log("let s see what is this point");
            // console.log(this);
            // let dataforpost ={
            //     status:this.selectedvalue,
            //     name : this.input,
            // };
            // console.log(dataforpost);
            // axios.post(`/fooduser/selectFoodModelByNameUseridStatus`, Qs.stringify(dataforpost))
            //     .then(res=>{
            //         this.modelAndUnits=res.data.returnList;
            //         console.log('res=>',res.data.returnList);
            //         if (res.data.returnMsg!=null)
            //             alert(res.data.returnMsg.toString());
            //         Toast(val);
            //     });
        },
        methods: {
            getImgUrl(index) {
                var dd = "../image/" + vm.$data.MovementModelAndUnits[index].imgurl;
                console.log(dd);
                return dd;
            },
            showDeleteButton() {
                console.log("show!!!!!");
                if (vm.$data.deletebuttonshow == false)
                    vm.$data.deletebuttonshow = true;
                else
                    vm.$data.deletebuttonshow = false;
            },
            onClickLeft() {
                window.location.href = "toIndex";
            },
            showPopup(e) {
                var index = e;

                vm.$data.pimage = vm.$data.modelAndUnits[index].imgurl;
                vm.$data.modelid = vm.$data.modelAndUnits[index].modelId;
                vm.$data.popname = vm.$data.modelAndUnits[index].name;
                vm.$data.isCollect = false;
                vm.$data.popdescription = vm.$data.modelAndUnits[index].description;
                // this.popunitdata=this.modelAndUnits[index].list;
                for (var k = 0; k < vm.$data.popunitdata.length; k++) {
                    vm.$data.popunitdata.pop();
                }
                for (var i = 0; i < vm.$data.modelAndUnits[index].list.length; i++) {
                    console.log("i=" + i);
                    console.log("unitname=" + vm.$data.modelAndUnits[index].list[i].unitName);
                    console.log("funitid=" + vm.$data.modelAndUnits[index].list[i].funitId);
                    vm.$data.popunitdata.push({
                        text: vm.$data.modelAndUnits[index].list[i].unitName,
                        value: vm.$data.modelAndUnits[index].list[i].funitId
                    });
                }
                console.log(vm.$data.popunitdata);
                vm.$data.spanunitname = vm.$data.popunitdata[0].text;
                vm.$data.spancosume = vm.$data.modelAndUnits[index].list[0].unitConsumeCalories;
                this.show = true;
                console.log(e.toString() + vm.$data.popdescription + "modelandunits is" + vm.$data.modelAndUnits[index].name);
            },
            eatFood() {
                let postdata = {
                    foodId: this.modelid,
                    unitId: this.selectedUnit,
                    quanity: this.quanlity,
                    eattime: this.selectedFoodValue,
                };
                console.log("foodid 是" + postdata.foodId);
                console.log("unitId 是" + postdata.unitId);
                console.log("quanity 是" + postdata.quanity);
                console.log("eattime 是" + postdata.eattime);
                axios.post(`/fooduser/eatAFoodModelById`, Qs.stringify(postdata))
                    .then(res = > {
                    console.log("data ==>" + vm.$data.modelAndUnits.toString());
                console.log("res ==>" + res.data.returnMsg.toString());
                if (res.data.returnMsg != null)
                    alert(res.data.returnMsg);
                Toast(val);
            })
                ;
            },

            turn() {
                // console.log("我是this"+this.$router);
                // console.log("vm"+vm.$router);
                // console.log("this"+this.$router);
                this.$router.push({
                    path: '/takealookoffood',
                    param: {
                        modelId: vm.$data.modelid,
                    }
                });
            },
            activated() {
                console.log('我是一个傻子！！！！！！！！！')
            },
            toTakealookoffood() {
                const self = this;
                var foodId = vm.$data.modelId;
                console.log(vm.$data.modelid);
                window.location.href = "toTakealookoffood?foodId=" + vm.$data.modelid;
                // window.location.href = "toTakealookoffood?foodId="+vm.$data.modelid;
                // let postdata={
                //     foodId : vm.$data.modelid
                // }
                //      axios.post(`/jumpto/toTakealookoffood`, Qs.stringify(postdata))
                //     .then(res=>{
                //     this.modelAndUnits=res.data.returnList;
                //     alert(res.data.modelunitifo);
                // if (res.data.returnMsg!=null)
                //     alert(res.data.returnMsg.toString());
                // this.turn();
                Toast(val);
                // });
            },
            addCustomizeFood() {
                window.location.href = "toAddCustomizeFood";
            },

            deleteFood(index) {
                let postmsg = {
                    foodid: vm.$data.modelAndUnits[index].modelId,
                };
                axios.post('/fooduser/deleteAFoodModel', Qs.stringify(postmsg)).then(
                    res = > {
                    var returnMsg = res.data.returnMsg;
                console.log("hhhh");
                if (returnMsg != null) {
                    console.log(returnMsg);
                    alert(returnMsg);
                    if (res.data.returnMsg != null) {
                        vm.$data.modelAndUnits.splice(index, 1)
                    }
                }
            }
            )
            },

            onSearch() {
                // console.log(this);
                // console.log("开始搜索"+this.input+this.selectedvalue);
                let postdata = {
                    status: vm.$data.selectedvalue,
                    name: vm.$data.input,
                };
                console.log(postdata);
                axios.post(`/fooduser/selectFoodModelByNameUseridStatus`, Qs.stringify(postdata))
                    .then(res = > {
                    this.modelAndUnits = res.data.returnList;
                //将图片地址都拼接上require
                for (var i = 0; i < vm.$data.modelAndUnits.length; i++) {
                    vm.$data.modelAndUnits[i].imgurl = "../image/userImg/" + vm.$data.modelAndUnits[i].imgurl;
                    console.log("this new img " + vm.$data.modelAndUnits[i].imgurl);
                }
                console.log('res=>', res.data.returnList);
                if (res.data.returnMsg != null)
                    alert(res.data.returnMsg.toString());
                Toast(val);
            })
                ;
            }
        }
    });
</script>
</html>